<template>
	<div>
		<van-nav-bar :title="goodData.name">
		</van-nav-bar>
		<div>
			<van-swipe lazy-render>
				<van-swipe-item v-for="(image,key) in srcList" :key="key">
					<van-image width="100vw" height="20rem" fit="cover" :src="image" @click="showImageView(key)" />
				</van-swipe-item>
			</van-swipe>
			<div style="padding: 1rem;">
				<div v-if="showSeller">
					<table>
						<tr>
							<td>
								<van-image style="margin: 1vw;" width="10vw" height="10vw" fit="cover" :src="seller.headImg" round />
							</td>
							<td>
								<strong style="margin: 3vw;font-size: 2rem;">{{seller.name}}</strong>
							</td>

						</tr>
						<tr>
							<td style="color: gray;font-size: 0.5rem;">
								等级: {{seller.level}} 级
							</td>
						</tr>
					</table>
				</div>
				<h3>
					<strong>
						{{goodData.name}}
					</strong>
				</h3>
				<van-row>
					<van-col span="8">
						<div style="color: red;float: left;font-size: 1.5rem;">
							<strong>
								&yen;{{priceShow}}
							</strong>
						</div>
					</van-col>
					<van-col offset="8" span="8" style="text-align: right;">
						<div>
							<div style="color: gray;font-size: 0.5rem;margin: 0.5rem;">
								还剩:{{goodData.number}}件
							</div>
						</div>
					</van-col>
				</van-row>
				<div style="margin-top: 0.5rem;">
					<div v-for="(t,index) in textList" :key="index">
						{{t}}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import url from '@/assets/url.json';
	import {
		showImagePreview
	} from 'vant';

	export default {
		props: {
			goodData: Object,
			showPayPage: Function
		},
		mounted() {
			console.log(this.goodData);
			let l = this.goodData.imgSrc.split(';')
			for (let key in l) {
				this.srcList.push(url.ip + '/' + l[key]);
			}
			this.textList = this.goodData.describes.split('\n');

			this.priceShow = this.changePriceType(this.goodData.price);
			this.getSellerUser();

			
		},
		data() {
			return {
				orderGoods:{
					
				},
				buyFormInfo: {

				},
				srcList: [],
				textList: [],
				priceShow: '',
				seller:{
					name: '',
					headImg: '',
					level:0
				},
				showSeller: false,
				chatPageShow:false,
				prepayPageShow: false,
				prepayPageData:{
					sellerName:'卖家用户名',
					goodName: '商品名',
					price: '648.66',
					number: 1,
					oid: '',
					id:'',
					statu:'已支付',
					time:'2023-4-23',
					imgSrc: '',
					headImgSrc :'',
					money:""
				}
			}
		},
		methods: {
			changePriceType(price) {
				let str = price;
				let numberPrice = Number.parseInt(str);
				if (numberPrice < 10) {
					str = '00' + str;
				} else {
					if (numberPrice < 100) {
						str = '0' + str;
					}
				}

				let arr = str.split('');
				arr.splice(-2, 0, '.');
				str = arr.join('');
				return str;
			},
			showImageView(position) {
				showImagePreview({
					images: this.srcList,
					startPosition: position,
				});
			},
			getSellerUser(){
				this.$axios({
					url:url.ip+'/api-user/user/id',
					method:'GET',
					params:{
						id: this.goodData.uid
					},
					headers:{
						token: this.$cookies.get('token'),
					}
				}).then((res)=>{
					let tData=res.data.data[0];
					this.seller.name=tData.userName;
					this.seller.headImg=url.ip+'/'+tData.headImgSrc;
					this.seller.level=tData.level;
					this.showSeller=true;
				}).catch((err)=>{
					console.log(err);
				})
			}
		},
	}
</script>

<style>
</style>